<template>
  <Dialog
    v-model="dialogVisible"
    width="800px"
    :title="
      dialogType === 'publish'
        ? t('market.industryNews.generate')
        : t('market.industryNews.bulkPublish')
    "
    :before-close="() => closeDialog(formRef)"
  >
    <el-form :model="form" ref="formRef" :rules="rules as FormRules" label-width="90px">
      <el-form-item :label="t('market.industryNews.platform')" prop="platform">
        <el-select v-model="form.platform" :placeholder="t('market.industryNews.platformMsg')">
          <el-option
            v-for="item in platformList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('market.industryNews.associatedMiners')">
        <el-cascader
          v-model="form.associatedMiners"
          :options="associatedMinersOptions"
          :props="props"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item :label="t('market.industryNews.language')" prop="language">
        <el-select v-model="form.language" :placeholder="t('market.industryNews.languageMsg')">
          <el-option
            v-for="item in languageList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('market.industryNews.promptWords')">
        <el-input
          v-model="form.cue_word"
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 10 }"
          :placeholder="t('market.industryNews.promptWordsMsg')"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button class="m-r-4" @click="closeDialog(formRef)"
        >{{ t('system.parameterConfig.cancel') }}
      </el-button>
      <el-button type="primary" @click="submit(formRef)"
        >{{ t('market.industryNews.generate') }}
      </el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
import { type FormInstance, type FormRules, ElMessage } from 'element-plus'
import { publishConfigApi, getPlatformSelectApi, getAssociateSelectApi } from '@/api/market'

const emit = defineEmits(['refresh'])
const { t } = useI18n()
const { query } = useRoute()

const props = reactive({
  value: 'value',
  label: 'label',
  children: 'children'
})
let dialogVisible = ref<boolean>(false)
let dialogType = ref<string>()

const formRef = ref<FormInstance>()
const form = ref<Record<string, any>>({
  platform: '',
  cue_word: '',
  associatedMiners: [],
  language: ''
})
const formKeys = ref<number[]>([])
const platformList = ref<any[]>([])
const associatedMinersOptions = ref<any[]>([])
const languageList = ref<any[]>([])
const rules = ref<FormRules>({
  platform: [
    {
      required: true,
      message: t('market.industryNews.platformMsg'),
      trigger: 'change'
    }
  ],
  associatedMiners: [
    {
      required: true,
      message: t('market.industryNews.associatedMinersMsg'),
      trigger: 'change'
    }
  ],
  language: [
    {
      required: true,
      message: t('market.industryNews.languageMsg'),
      trigger: 'change'
    }
  ]
})

const submit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      const params = JSON.parse(JSON.stringify(form.value))
      params.associatedMiners = params.associatedMiners[1]
      const resp = await publishConfigApi({ ...params, id: query.id as string })
      if (resp.code === 0) {
        ElMessage.success(t('market.industryNews.publishMsg'))
        closeDialog(formEl)
        emit('refresh')
      }
    }
  })
}

const closeDialog = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  form.value = {
    platform: '',
    cue_word: '',
    associatedMiners: [],
    language: ''
  }
  formEl.resetFields()
  dialogVisible.value = false
}

const getPlatformSelectList = async () => {
  const resp = await getPlatformSelectApi()
  platformList.value = resp.data.platform
  languageList.value = resp.data.language
  const associateResp = await getAssociateSelectApi()
  associatedMinersOptions.value = associateResp.data.list
}

const getBackShow = (type: string, row?: any) => {
  dialogType.value = type
  if (type === 'publish' && Reflect.ownKeys(row!).length) {
    formKeys.value = [row.id]
  } else {
    formKeys.value = row.map((item: Record<string, any>) => item.id)
  }
  getPlatformSelectList()
}

defineExpose({
  dialogVisible,
  getBackShow
})
</script>
<style lang="less" scoped></style>
